<template>
<!-- 知识可视化页面弹框导航 -->
    <div class="knowledge-nav">
        <el-menu :default-active="activeIndex" class="el-menu-demo bi-nav" mode="horizontal" @select="handleSelect">
            <el-menu-item :index="item.value" class="bi-nav-content" v-for="(item,index) in navMenu" :key="index">{{item.label}}</el-menu-item>
        </el-menu>
    </div>
</template>

<script>
export default {
    props:{
        activeIndex: {
            type: String,
            default: 'detail'
        }
    },
    data() {
        return {
            // activeIndex: 'detail',
            navMenu: [
                {
                    label: '详情',
                    value: 'detail'
                },
                {
                    label: '筛选',
                    value: 'select'
                },
                {
                    label: '配置',
                    value: 'config'
                }
            ]
        }
    },
    created() {},
    methods: {
        handleSelect(key) {
            this.$emit('selectValue', key)
        }
    }

}
</script>

<style lang="scss" scoped>
.knowledge-nav {
    width: 100%;
    /deep/ .el-menu--horizontal>.el-menu-item.is-active {
        border-top: 2px solid #4b71eb;
        border-bottom: none;
        color: #4b71eb;
        background: #fff;
    }
    .bi-nav {
        display: flex;
        background: #F3F4F8;
        border: #F3F4F8;
    }
    .bi-nav-content {
        flex: 1;
        text-align: center;
        height: 56px;
        border: #fff;
    }
}
</style>